<template>
    <div class="dialog">
        <el-dialog :title="isAdd ? '添加秒杀' : '修改秒杀'" :before-close="cancel" center :visible.sync="isShow">
            <el-form ref="seckillDia" :rules="rules" :model="form">
                <!-- 活动名称 -->
                <el-form-item prop="title" label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 活动期限 -->
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker v-model="value" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <!-- 一级分类 -->
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.first_cateid" @change="getSecondAttrs(false)" placeholder="请选择分类">
                        <el-option v-for="item in getCate" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 二级分类 -->
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.second_cateid" @change="getShopAttrs(false)" placeholder="请选择分类">
                        <el-option v-for="item in second_attrs" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 商品 -->
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="form.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in shop_attrs" :key="item.id" :label="item.goodsname"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 状态 -->
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="gray" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
//添加   获取一条    修改 
import { seckadd, seckinfo, seckedit, goodslist } from "../../request/api"
import { mapActions, mapGetters } from 'vuex';
export default {
    data() {
        return {
            // title限时秒杀名称
            // begintime开始时间
            // endtime结束时间
            // first_cateid商品一级分类编号
            // second_cateid商品二级分类编号
            // goodsid商品编号
            // status状态   1正常2禁用
            form: {
                id: '',
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1,
            },
            //二级分类数据
            second_attrs: [],
            //商品数据
            shop_attrs: [],
            //时间  日期
            value: '',
            //规则 表单部分
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            },
            formLabelWidth: '120px'
        }
    },
    props: ['isShow', 'isAdd'],
    computed: {
        ...mapGetters({
            //分类数据
            getCate: 'shop/getCate',
            //商品数据
            getGoods: 'goods/getGoods'
        })
    },
    mounted() {
        //获取分类数据
        this.getCateAction()
        //商品数据
        this.getGoodsAction()
    },
    methods: {
        ...mapActions({
            //分类数据
            getCateAction: 'shop/getCateAction',
            //商品数据
            getGoodsAction: 'goods/getGoodsAction',
            //秒杀数据
            getSecillAction: 'seckill/getSecillAction'

        }),
        //二级分类数据获取
        getSecondAttrs(n) {
            let result = this.getCate.findIndex((item) => {
                return item.id == this.form.first_cateid
            })
            this.second_attrs = this.getCate[result].children
            if (!n) {
                this.form.second_cateid = ""
                this.form.goodsid = ""
            }
        },
        //商品数据
        getShopAttrs(n) {
            goodslist({
                fid: this.form.first_cateid,
                sid: this.form.second_cateid,
            }).then((res) => {
                this.shop_attrs = res.list ? res.list : []
                if (!n) {
                    this.form.goodsid = ""
                }
            })
        },
        //关闭dialog
        cancel() {
            this.$emit('cancel')
            this.reset()
        },
        //关闭dialog  重置内部数据
        reset() {
            this.form = {
                title: '',
                begintime: '',
                endtime: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1,
            }
            this.value = null
            this.$refs.seckillDia.resetFields()
        },
        //编辑  数据回显
        lookup(id) {
            seckinfo({ id }).then(res => {
                if (res.code == 200) {
                    console.log(this.form);
                    //表单数据回显
                    this.form = res.list
                    this.form.id = id
                    //日期数据回显
                    this.form.begintime = this.getSimpleDate(Number(res.list.begintime))
                    this.form.endtime = this.getSimpleDate(Number(res.list.endtime))
                    this.value = [this.form.begintime, this.form.endtime]
                    //二级分类回显
                    this.getSecondAttrs(true)
                    //商品数据回显
                    this.getShopAttrs(true)
                }
            })
        },
        //确定  提交表单事件
        confirm() {
            this.$refs.seckillDia.validate((val) => {
                if (val) {
                    this.form.begintime = this.getStampDate(this.filterTime(this.value[0]))
                    this.form.endtime = this.getStampDate(this.filterTime(this.value[1]))
                    if (this.isAdd) {
                        //添加按钮

                        seckadd(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //添加成功 关闭
                                this.cancel()
                                //重新调用数据列表
                                this.getSecillAction()
                            }
                        }).catch(res => {
                            this.$message.error(res.msg)
                        })
                    } else {
                        //编辑按钮    
                        //转换时间戳
                        seckedit(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //添加成功 关闭
                                this.cancel()
                                //重新调用数据列表
                                this.getSecillAction()
                            }
                        }).catch(res => [
                            this.$message.error(res.msg)

                        ])
                    }
                }
            })
        },
        //时间转化     中国标准时间转化为 年-月-日
        filterTime(time) {
            var date = new Date(time);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            var h = date.getHours();
            h = h < 10 ? "0" + h : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? "0" + minute : minute;
            var s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
        },
        //年月日转化为时间戳
        getStampDate(currentDate) {
            let stamp = new Date(currentDate).getTime() // 年月日转化成时间戳
            //let preDate = new Date(currentDate).getTime() - (24 * 60 * 60 * 1000) // 前一天时间戳
            //let afterDate = new Date(currentDate).getTime() + (24 * 60 * 60 * 1000) // 后一天时间戳
            return stamp
        },
        //时间戳转化为中国标准时间
        getSimpleDate(date) {
            let dd = new Date(date) // 时间戳转化成中国标准时间格式
            return dd
        }
    }
}
</script>
<style scoped></style>